<template>
	<div class="buy">
		<div class="buyBox">
			<dl class="txt">
				<dt><span>当前市值</span></dt>
				<dd>{{ parseFloat(initData.price).toFixed(4) }} <span>TXL</span></dd>
			</dl>
			<dl class="priceType">
				<dt>钱包类型</dt>
				<dd v-for="(item,index) in priceType" @click='priceIndex = index' :class='{checked : index == priceIndex}' :key='index'>{{item}}</dd>
			</dl>
			<dl class="input">
				<dt><span>买入量</span></dt>
				<dd><input type="text" @input='change' v-model="buyNum" placeholder="买入量"></dd>
			</dl>
			<dl class="input">
				<dt><span>验证码</span></dt>
				<dd><input type="text" v-model="imgCode" placeholder="验证码"><img :src="initData.captcha" @click='replaceCode' class="verifiCode" alt=""></dd>
			</dl>
			<input type="submit" class="submit" @click='submit' value="买入">
		</div>
		<div class="ruleBox">
			<div class="calcTXLPrice">{{calcTXL}}</div>
			<div class="rule"><router-link tag='span' to='/personal/protocol'>《交易规则》</router-link></div>
		</div>

	</div>
</template>

<script>
import { buy, tradeInSubmit } from '../../../../config/getData'

var priceType = ['资产钱包','交易钱包']
export default {
	data(){
		return {
			initData:{},
			buyNum:'',
			imgCode:'',
			priceType,
			priceIndex:-1
		}
	},
	computed: {
		calcTXL(){
			if(this.initData.price){
				return '交易额：' + (this.initData.price * 10000 * this.buyNum / 10000).toFixed(4)
			}else{
				return '交易额：'
			}
		},
		isDisabled(){
			return this.buyNum.length > 0 && this.imgCode.length > 0
		}
	},
	created(){
		buy().then( res => {
			this.initData = res.data
			sessionStorage.imgCodeUrl = res.data.captcha
		})
	},
	methods:{
		change(){
			this.buyNum = /[0-9]+/g.exec(this.buyNum)
		},
		replaceCode(){
			this.initData.captcha = ''
			setTimeout( () => this.initData.captcha = sessionStorage.imgCodeUrl,100)
		},
		submit(){
			if(this.buyNum % 500 !== 0) {
				this.$vux.toast.show({
					text: '买入量只能输入500的倍数',
					width:'auto',
				})
				return;
			}
			if(this.priceIndex === -1){
				this.$vux.toast.show({
					text: '请选择钱包类型',
					width:'auto',
				})
				return;
			}
			tradeInSubmit(this.initData.price,this.buyNum[0], this.imgCode, this.priceIndex+1).then( res => {
				this.$vux.toast.show({
					text: res.msg,
					type: 'success'
				})
				//清空值
				this.priceIndex = -1
				this.buyNum = ''
				this.imgCode = ''
				//更新验证码
				this.replaceCode()
			})
		}
	},
}
</script>


<style lang="scss" scoped>
@import '../../../../assets/css/all';
.buy{margin:15px 0;
.buyBox{background-color: white;padding-bottom: 1px;}
	dl{display: flex;margin: 0 15px;padding:5px 0;line-height:40px;border-bottom:1px solid #e6e6e6;
	align-items: center;
		dt{width: 80px;
			span{display: inline-block;width:98%;line-height: 1;}
		}
		dd{flex:1;position: relative;
			input{width: 94%;height: 40px;border:none;margin-left: 6%;}
			.verifiCode{position: absolute;right:0;top:0;width:140px;height:40px;background-color: #f5f5f5;}
		}
	}
	.priceType{
		dd{width:80px;flex:none;background-color: #f5f5f5;text-align: center;line-height: 30px;height: 30px;border-radius: 4px;}
		dd.checked{background-color: $red;color:white;}
		dd + dd{margin-left:15px;}
	}
	.calcTXLPrice{text-align: center;margin-top:50px;}
	dl.input span{border-right:1px solid #ccc;}

	input.submit{width:90%;height: 40px;margin:40px auto 20px;display: block;}
	.rule{text-align: center;color:#da1e1e;width:100%;margin-top:100px;}
	.ruleBox{padding-bottom: 40px;}
}
</style>

